h3 
  // START Language list
  .pull-right
    .btn-group(dropdown='', is-open='language.listIsOpen')
      button.btn.btn-default(type='button', dropdown-toggle="")
        | {{language.selected}}
        span.caret
      ul.dropdown-menu.dropdown-menu-right.animated.fadeInUpShort(role='menu')
        li(ng-repeat='(localeId, langName) in language.available')
          a(ng-click='language.set(localeId, $event)', href='#') {{langName}}
  // END Language list    

  | Dashboard
  small {{ 'dashboard.WELCOME' | translate:{ appName: app.name } }}  !

// START widgets box
.row
  .col-lg-3.col-sm-6
    // START widget
    .panel.widget.bg-primary
      .row.row-table
        .col-xs-4.text-center.bg-primary-dark.pv-lg
          em.icon-cloud-upload.fa-3x
        .col-xs-8.pv-lg
          .h2.mt0 1700
          .text-uppercase Uploads
  .col-lg-3.col-sm-6
    // START widget
    .panel.widget.bg-purple
      .row.row-table
        .col-xs-4.text-center.bg-purple-dark.pv-lg
          em.icon-globe.fa-3x
        .col-xs-8.pv-lg
          .h2.mt0 700
            small GB
          .text-uppercase Quota
  .col-lg-3.col-md-6.col-sm-12
    // START widget
    .panel.widget.bg-green
      .row.row-table
        .col-xs-4.text-center.bg-green-dark.pv-lg
          em.icon-bubbles.fa-3x
        .col-xs-8.pv-lg
          .h2.mt0 500
          .text-uppercase Reviews
  .col-lg-3.col-md-6.col-sm-12
    // START date widget
    .panel.widget
      .row.row-table
        .col-xs-4.text-center.bg-green.pv-lg
          // See formats: https://docs.angularjs.org/api/ng/filter/date
          now.text-sm(format='MMMM')
          br
          now.h2.mt0(format="d")
        .col-xs-8.pv-lg
          now.text-uppercase(format='EEEE')
          br
          now.h2.mt0(format='h:mm')
          now.text-muted.text-sm(format='a')
    // END date widget    
// END widgets box

.row
  // START dashboard main content
  .col-lg-9
    // START chart
    .row
      .col-lg-12
        // START widget
        #panelChart9.panel.panel-default(ng-controller="FlotChartController")
          .panel-heading
            paneltool(tool-collapse, tool-refresh="traditional")
            .panel-title Inbound visitor statistics
          .panel-wrapper(collapse="panelChart9")
            .panel-body
              flot(dataset='splineData', options='splineOptions', height="250px")
        // END widget
    // END chart
    .row
      .col-lg-12
        .panel.widget
          .row.row-table
            .col-md-2.col-sm-3.col-xs-6.text-center.bg-info.pv-xl
              // Allowed types
              // "clear-day", "clear-night", "partly-cloudy-day", "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind", "fog"
              div(skycon="clear-day", width="80", height="80")
            .col-md-2.col-sm-3.col-xs-6.pv.br
              .h1.m0.text-bold 32&deg;
              .text-uppercase Clear
            .col-md-2.col-sm-3.hidden-xs.pv.text-center.br
              .text-info.text-sm 10 AM
              .text-muted.text-md
                em.wi.wi-day-cloudy
              .text-info
                em.wi.wi-sprinkles 
                span.text-muted 20%
              .text-muted 27&deg;
            .col-md-2.col-sm-3.hidden-xs.pv.text-center.br
              .text-info.text-sm 11 AM
              .text-muted.text-md
                em.wi.wi-day-cloudy
              .text-info
                em.wi.wi-sprinkles 
                span.text-muted 30%
              .text-muted 28&deg;
            .col-md-2.hidden-sm.hidden-xs.pv.text-center.br
              .text-info.text-sm 12 PM
              .text-muted.text-md
                em.wi.wi-day-cloudy
              .text-info
                em.wi.wi-sprinkles 
                span.text-muted 20%
              .text-muted 30&deg;
            .col-md-2.hidden-sm.hidden-xs.pv.text-center
              .text-info.text-sm 1 PM
              .text-muted.text-md
                em.wi.wi-day-sunny-overcast
              .text-info
                em.wi.wi-sprinkles 
                span.text-muted 0%
              .text-muted 30&deg;

    .row
      .col-lg-4
        // START widget
        .panel.widget
          .panel-body
            .clearfix
              h3.pull-left.text-muted.mt0 300 
              em.pull-right.text-muted.fa.fa-coffee.fa-2x
            div.pv-lg(sparkline="",data-type='line', data-height='80', data-width='100%', data-line-width='2', data-line-color="{{colorByName('purple')}}", data-spot-color='#888', data-min-spot-color="{{colorByName('purple')}}", data-max-spot-color="{{colorByName('purple')}}", data-fill-color='', data-highlight-line-color='#fff', data-spot-radius='3', values="1,3,4,7,5,9,4,4,7,5,9,6,4", data-resize="true")
            p: small.text-muted Actual progress
            progressbar.progress-striped.progress-xs(value='80', type='info') 80%
                
        // END widget
      .col-lg-8
        .panel.panel-default
          .panel-heading
            .pull-right.label.label-danger 5
            .pull-right.label.label-success 12
            .panel-title Team messages
          
          // START list group
          scrollable.list-group(height="180")
            // START list group item
            a.list-group-item(href='#')
              .media-box
                .pull-left
                  img.media-box-object.img-circle.thumb32(src="app/img/user/02.jpg", alt="Image")
                .media-box-body.clearfix
                  small.pull-right 2h
                  strong.media-box-heading.text-primary 
                    span.circle.circle-success.circle-lg.text-left
                    | Catherine Ellis
                  p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
            // END list group item
            // START list group item
            a.list-group-item(href='#')
              .media-box
                .pull-left
                  img.media-box-object.img-circle.thumb32(src="app/img/user/03.jpg", alt="Image")
                .media-box-body.clearfix
                  small.pull-right 3h
                  strong.media-box-heading.text-primary 
                    span.circle.circle-success.circle-lg.text-left
                    | Jessica Silva
                  p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla facilisi.
            // END list group item
            // START list group item
            a.list-group-item(href='#')
              .media-box
                .pull-left
                  img.media-box-object.img-circle.thumb32(src="app/img/user/09.jpg", alt="Image")
                .media-box-body.clearfix
                  small.pull-right 4h
                  strong.media-box-heading.text-primary 
                    span.circle.circle-danger.circle-lg.text-left
                    | Jessie Wells
                  p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
            // END list group item
            // START list group item
            a.list-group-item(href='#')
              .media-box
                .pull-left
                  img.media-box-object.img-circle.thumb32(src="app/img/user/12.jpg", alt="Image")
                .media-box-body.clearfix
                  small.pull-right 1d
                  strong.media-box-heading.text-primary 
                    span.circle.circle-danger.circle-lg.text-left
                    | Rosa Burke
                  p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
            // END list group item
            // START list group item
            a.list-group-item(href='#')
              .media-box
                .pull-left
                  img.media-box-object.img-circle.thumb32(src="app/img/user/10.jpg", alt="Image")
                .media-box-body.clearfix
                  small.pull-right 2d
                  strong.media-box-heading.text-primary 
                    span.circle.circle-danger.circle-lg.text-left
                    | Michelle Lane
                  p.mb-sm: small Mauris eleifend, libero nec cursus lacinia...
            // END list group item
          // END list group
          // START panel footer
          .panel-footer.clearfix
            .input-group
              input.form-control.input-sm(type='text', placeholder='Search message ..')
              span.input-group-btn
                button.btn.btn-default.btn-sm(type='submit')
                  i.fa.fa-search
          // END panel-footer
  // END dashboard main content

  // START dashboard sidebar
  aside.col-lg-3
    
    // START loader widget
    .panel.panel-default
      .panel-body
        a.text-muted.pull-right(href="#"): em.fa.fa-arrow-right
        .text-info Average Monthly Uploads
        canvas.center-block(classyloader="", data-percentage="70", data-speed="20", data-font-size="40px", data-diameter="70", data-line-color="{{colorByName('info')}}", data-remaining-line-color="rgba(200,200,200,0.4)", data-line-width="10", data-rounded-line="true")
        .text-center(sparkline="", data-bar-color="{{colorByName('info')}}", data-height="30", data-bar-width="5", data-bar-spacing="2", values="5,4,8,7,8,5,4,6,5,5,9,4,6,3,4,7,5,4,7")
      .panel-footer
        p.text-muted
          em.fa.fa-upload.fa-fw
          span This Month
          span.text-dark 1000 Gb
    // END loader widget

    // START messages and activity
    .panel.panel-default
      .panel-heading
        .panel-title Latest activities
      // START list group
      .list-group
        // START list group item
        .list-group-item
          .media-box
            .pull-left
              span.fa-stack
                em.fa.fa-circle.fa-stack-2x.text-purple
                em.fa.fa-cloud-upload.fa-stack-1x.fa-inverse.text-white
            .media-box-body.clearfix
              small.text-muted.pull-right.ml 15m
              .media-box-heading
                a(href="#").text-purple.m0 NEW FILE
              p.m0: small
                a(href="#") Bootstrap.xls
        // END list group item

        // START list group item
        .list-group-item
          .media-box
            .pull-left
              span.fa-stack
                em.fa.fa-circle.fa-stack-2x.text-info
                em.fa.fa-file-text-o.fa-stack-1x.fa-inverse.text-white
            .media-box-body.clearfix
              small.text-muted.pull-right.ml 2h
              .media-box-heading
                a(href="#").text-info.m0 NEW DOCUMENT
              p.m0: small
                a(href="#") Bootstrap.doc
        // END list group item

        // START list group item
        .list-group-item
          .media-box
            .pull-left
              span.fa-stack
                em.fa.fa-circle.fa-stack-2x.text-danger
                em.fa.fa-exclamation.fa-stack-1x.fa-inverse.text-white
            .media-box-body.clearfix
              small.text-muted.pull-right.ml 5h
              .media-box-heading
                a(href="#").text-danger.m0 BROADCAST
              p.m0
                a(href="#") Read
        // END list group item

        // START list group item
        .list-group-item
          .media-box
            .pull-left
              span.fa-stack
                em.fa.fa-circle.fa-stack-2x.text-success
                em.fa.fa-clock-o.fa-stack-1x.fa-inverse.text-white
            .media-box-body.clearfix
              small.text-muted.pull-right.ml 15h
              .media-box-heading
                a(href="#").text-success.m0 NEW MEETING
              p.m0
                small On 
                  em 10/12/2015 09:00 am
        // END list group item
        // START list group item
        .list-group-item
          .media-box
            .pull-left
              span.fa-stack
                em.fa.fa-circle.fa-stack-2x.text-warning
                em.fa.fa-tasks.fa-stack-1x.fa-inverse.text-white
            .media-box-body.clearfix
              small.text-muted.pull-right.ml 1w
              .media-box-heading
                a(href="#").text-warning.m0 TASKS COMPLETION
              progressbar.progress-xs.m0(value='22', type='warning') 22%

        // END list group item
      // END list group
      // START panel footer
      .panel-footer.clearfix
        a(href='#').pull-left
          small Load more
      // END panel-footer
    // END messages and activity
  // END dashboard sidebar

